<template>
<div class="form_voluntter">
        <div class="head_volunteer"><strong>志愿者申请说明</strong></div>
        <div class="form">
          <div class="form_left">
          <h4 class="h4">个人信息</h4>
          <el-form ref="ruleFormRef"  :rules="rules" label-position="left" :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="姓名:" prop="name">
                <el-input style="width: 59%;" v-model="form.name" />
              </el-form-item>
              <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio value=0>男</el-radio>
                  <el-radio value=1>女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="手机号:" prop="phone">
                <el-input style="width: 59%;" v-model="form.phone" />
              </el-form-item>
              <el-form-item label="微信号:" prop="wechat">
                <el-input style="width: 59%;" v-model="form.wechat" />
              </el-form-item>
              <el-form-item label="空闲时间:" prop="spareTime" >
                <el-radio-group v-model="form.spareTime">
                  <el-radio value="全天">全天</el-radio>
                  <el-radio value="工作日">工作日</el-radio>
                  <el-radio value="周末">周末</el-radio>
                  <el-radio value="寒暑假">寒暑假</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="养宠经历:" prop="experience">
              <el-radio-group v-model="form.experience">
                <el-radio value="1">有</el-radio>
                <el-radio value="0">无</el-radio>
              </el-radio-group>
              </el-form-item>
              <el-form-item label="备注" style="margin-left: 10px;">
                <el-input style="width: 59%;" v-model="form.remark" />
              </el-form-item>
              <el-form-item>
                <el-button class="btn" @click="submitForm(ruleFormRef)" type="primary">提交</el-button>
              </el-form-item>
           </el-form>
          </div>
          <div class="form_right">
            <el-form label-position="left" :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="昵称:">
                <el-input style="width: 59%;font-size: small;" v-model="form.nickname" placeholder="想要人家怎么称呼你"/>
              </el-form-item>
              <el-form-item label="年龄:">
                <el-input style="width: 59%;" v-model="form.age" />
              </el-form-item>
              <el-form-item label="住址:">
                <el-input style="width: 59%;" v-model="form.address" />
              </el-form-item>
              <el-form-item label="擅长:" >
              <el-checkbox-group v-model="form.advantage">
                <el-checkbox value="活动策划" name="advantage">
                  活动策划
                </el-checkbox>
                <el-checkbox value="文案编写" name="advantage">
                 文案编写
                </el-checkbox>
                <el-checkbox value="软件开发" name="advantage">
                  软件开发
                </el-checkbox>
                <el-checkbox value="摄影" name="advantage">
                  摄影
                </el-checkbox>
                <el-checkbox value="视频制作" name="advantage">
                  视频制作
                </el-checkbox>
                <el-checkbox value="动物救助" name="advantage">
                  动物救助
                </el-checkbox>
                <el-checkbox value="其他" name="advantage">
                  其他
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
           </el-form>
           
          </div>
          
        </div>
        
      </div>
</template>
<script setup >

import { reactive, ref } from "vue";
import { reqApply} from "@/api/volunteer/index.js";
// 表单数据
const form = reactive({
  name: 'xiaopang',
  sex:"0",
  phone:'13555555555',
  wechat: '141422',
  spareTime: '周日',
  experience: '1',
  nickname:'dfgdf',
  age:18,
  address:'sdccsdcs',
  advantage:[],
})
const ruleFormRef = ref()
//表单校验
const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 1, max: 15, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入正确的时间号码',
      trigger: 'blur',
    },
  ],
  wechat: [
    { required: true, message: '请输入微信号码', trigger: 'blur' },
    { min: 1, max: 14, message: 'Length should be 1 to 14', trigger: 'blur' },
  ],
  spareTime: [
    { required: true, message: '请选择空闲时间', trigger: 'change' },
  ],
  experience: [
  {
      required: true,
      message: '请选择养宠经历',
      trigger: 'change',
    },
  ],
 
 
})
//提价表单
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      form.advantage = form.advantage.join(",")
      reqApply(form).then(res => {
        if (res.code === 200) {
          ElMessage({
              message: '申请成功',
              type: 'success',
            })
         }    
        console.log(res)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="less" scoped>

.head_volunteer{
    font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
    text-align: center;
    width: 13%;
    background-color: #09C199;
    color: #fff;
    border-radius: 5px 5px 0 0;
  }
  .form{
    display: flex;

    margin-bottom: 60px;
    .form_left{
      flex: 1;
      .btn{
        background-color: #09C199;
        width: 20%;
        height: 40%;
        margin-top: 10%;
        position: relative;
        left: 160%;
      }
    }
    .form_right{
      flex: 1;
      margin-top: 6%;
     
    }
  }
  .h4{
      margin: 0;
      padding: 20px 0;
      border-top: 1px solid #09C199;
        }

</style>
